<template>
	<el-form
		ref="form"
		class="plr-1"
		label-position="top"
		label-width="40px"
		:model="form"
		:disabled="saving"
	>
		<el-form-item>
			<el-upload
				drag
				list-type="picture"
				:headers="{ token }"
				:before-upload="beforeUpload"
				:file-list="[form]"
				:data="fileData"
				:on-progress="uploadProgress"
				:on-error="uploadError"
				:on-success="uploadSuccess"
				:action="`${baseUrl}/index/uposs`"
				accept="image/*"
				:show-file-list="false"
			>
				<i class="el-icon-upload" />
				<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<div class="images-item" v-if="form.img">
				<span
					class="el-icon-close remove"
					@click="handleRemove()"
					v-if="form.status != 'uploading'"
				/>
				<div class="images-item__show">
					<el-image
						class="img"
						:src="form.img"
						fit="contain"
						:preview-src-list="previewList"
					/>
					<div class="images-item__show--right">
						<div class="ellipsis">{{ form.name }}</div>
						<el-progress
							v-if="form.status == 'uploading'"
							:stroke-width="2"
							:percentage="form.percentage"
							:format="percentageFormat"
						/>
					</div>
				</div>
			</div>
		</el-form-item>
		<el-form-item prop="padding_lr" label="左右边距(px)">
			<el-input
				v-model="form.padding_lr"
				placeholder="请输入边距"
				oninput="value=value.replace(/[^\d^\.]/g,'')"
				@blur="form.padding_lr = $event.target.value"
			/>
		</el-form-item>
		<el-form-item prop="padding_tb" label="上下边距(px)">
			<el-input
				v-model="form.padding_tb"
				placeholder="请输入边距"
				oninput="value=value.replace(/[^\d^\.]/g,'')"
				@blur="form.padding_tb = $event.target.value"
			/>
		</el-form-item>
		<el-form-item prop="is_fixed" label="是否悬浮">
			<cl-select v-model="form.is_fixed" filterable style="width: 100%">
				<el-option :value="1" label="是" />
				<el-option :value="2" label="否" />
			</cl-select>
		</el-form-item>
		<el-form-item prop="is_dialog" label="是否弹窗">
			<cl-select v-model="form.is_dialog" filterable style="width: 100%">
				<el-option :value="1" label="是" />
				<el-option :value="2" label="否" />
			</cl-select>
		</el-form-item>
		<el-form-item prop="click_type" label="触发事件">
			<cl-select v-model="form.click_type" filterable style="width: 100%">
				<el-option :value="1" label="默认加微弹窗" />
				<el-option :value="2" label="跳转获客助手" />
				<el-option :value="3" label="打开二维码" />
			</cl-select>
		</el-form-item>
		<template v-if="form.click_type == 2 || form.click_type == 3">
			<!-- <el-form-item prop="skip_mp_id" label="跳转小程序(支持多选)">
				<div class="tips" style="line-height: normal;">默认不选则默认加微弹窗</div>
				<cl-select v-model="form.skip_mp_id" style="width: 100%" multiple :multiple-limit="20" filterable clearable>
					<el-option
						v-for="item in adMpList"
						:key="item.id"
						:value="item.id"
						:label="item.title"
					/>
				</cl-select> -->
<!--
				<cl-select-load-more
					ref="selectMpAd"
					v-model="form.skip_mp_id"
					placeholder="请选择跳转小程序"
					style="width: 100%"
					:apiFn="apiAdMpListFn"
					@change="changeAdMpFn"
					:initRequest="true"
					keyword="title"
				>
					<template v-slot="{ data }">
						<el-option
							v-for="item in data"
							:key="item.id"
							:label="item.title"
							:value="item.id"
						/>
					</template>
				</cl-select-load-more> -->
			<!-- </el-form-item> -->
			<el-form-item prop="mp_query" label="二跳页面参数">
				<div class="tips" style="line-height: normal;">默认不填为当前模板页面参数</div>
				<!-- <el-input v-model="form.mp_query" placeholder="请输入二跳页面参数" /> -->
				<cl-select v-model="form.mp_query" style="width: 100%" filterable clearable>
					<el-option
						v-for="item in selfAdList"
						:key="item.id"
						:value="item.id"
						:label="item.name"
					/>
				</cl-select>
			</el-form-item>
		</template>
	</el-form>
</template>
<script>
import { baseUrl } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import miniList from "../../mixins/mini_list.js"

export default {
	mixins: [ miniList ],
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		config: {
			type: Object,
			default: () => ({})
		},
		adMpList: {
			type: Array,
			default: () => []
		},
		selfAdList: {
			type: Array,
			default: () => [{}]
		}
	},
	data() {
		return {
			baseUrl,
			form: this.view.options,
			fileData: {}
		};
	},
	computed: {
		...mapGetters(["token"]),
		previewList() {
			const { img } = this.form;
			return [img];
		}
	},
	methods: {
		handleRemove() {
			this.form = { img: "" };
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
			this.fileData.type = 'ad_template'
		},
		// 文件上传时
		uploadProgress(evt, file) {
			Object.assign(this.form, {
				...file,
				img: file.url
			});
		},
		// 上传成功
		uploadSuccess(res, file) {
			Object.assign(this.form, {
				name: file.name,
				status: file.status,
				percentage: file.percentage,
				img: res.data
			});
			this.$message.success("上传成功");
			this.view.options = this.form;
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images-item {
	border: solid 1px #e0e0e0;
	border-radius: 3px;
	padding: 10px 8px 14px;
	margin: 10px 0;
	position: relative;
	.remove {
		position: absolute;
		right: 10px;
		top: 10px;
		color: grey;
		cursor: pointer;
	}
	&__show {
		display: flex;
		align-items: center;
		.img {
			width: 100px;
			height: 80px;
			border: solid 1px #e0e0e0;
			border-radius: 3px;
		}
		&--right {
			flex: 1;
			overflow: hidden;
			padding-left: 10px;
		}
	}
	::v-deep .el-form-item {
		margin-bottom: 0;
	}
}
</style>
